<template>
         <div class="layout">
             
               <!-- <button @click="store">store</button><br>
               login:{{login}} -->


                <div v-if="!login ">
                        <h2 style="font-size:18px;padding:20px">请登录</h2>
                       <Form ref="formInline" :model="formInline" :rules="ruleInline" style="width:800px" :label-width="520">
                            <FormItem prop="title">
                                <Input type="text" v-model="formInline.title" placeholder="username">
                                    <Icon type="ios-person-outline" slot="prepend"></Icon>
                                </Input>

                            </FormItem>
                            <FormItem prop="password">
                                <Input type="password" v-model="formInline.password" placeholder="Password">
                                    <Icon type="ios-locked-outline" slot="prepend"></Icon>
                                </Input>
                            </FormItem>
                            <FormItem>
                                <Button type="primary" @click="handleSubmit('formInline')">登录</Button>
                                <Button type="primary" @click="registSubmit">注册</Button>
                            </FormItem>
                    </Form>
                </div>

                <div v-if="login">
                                       
                        <Layout>
                        <Header>
                            <Menu mode="horizontal" theme="dark" active-name="1">
                                
                                <div class="layout-logo">
                                     <b style="font-size:18px;color:#fff">欢迎：</b>
                                <a href="javascript:;" class="aStyle">{{formInline.title}}</a> 
                            &nbsp;&nbsp;&nbsp;<a href="" class="aStyle">退出</a>
                                </div>
                                <div class="layout-nav">
                                    <MenuItem name="1">
                                        <Icon type="ios-navigate"></Icon>
                                        Item 1
                                    </MenuItem>
                                    <MenuItem name="2">
                                        <Icon type="ios-keypad"></Icon>
                                        Item 2
                                    </MenuItem>
                                    <MenuItem name="3">
                                        <Icon type="ios-analytics"></Icon>
                                        Item 3
                                    </MenuItem>
                                    <MenuItem name="4">
                                        <Icon type="ios-paper"></Icon>
                                        Item 4
                                    </MenuItem>
                                </div>
                            </Menu>
                        </Header>
                        <Layout :style="{padding: '0 50px'}">
                            <Breadcrumb :style="{margin: '16px 0'}">
                                <BreadcrumbItem>Home</BreadcrumbItem>
                                <BreadcrumbItem>Components</BreadcrumbItem>
                                <BreadcrumbItem>Layout</BreadcrumbItem>
                            </Breadcrumb>
                            <Content :style="{padding: '24px 0', minHeight: '280px', background: '#fff'}">
                                <Layout>
                                    <Sider hide-trigger :style="{background: '#fff'}">
                                        <Menu active-name="1-2" theme="light" width="auto" :open-names="['1']">
                                            <Submenu name="1">
                                                <template slot="title">
                                                    <Icon type="ios-navigate"></Icon>
                                                功能模块
                                                </template>
                                                <MenuItem name="3-1"><router-link to="/cate">分类管理</router-link></MenuItem>
                                                <MenuItem name="3-2"><router-link to="/new">新闻管理</router-link></MenuItem>
                                                <MenuItem name="3-1"><router-link to="/user">用户管理</router-link></MenuItem>
                                                <MenuItem name="3-2"><router-link to="/comment">评论管理</router-link></MenuItem>
                                                <MenuItem name="3-2"><router-link to="/updown">上传管理</router-link></MenuItem>
                                             </Submenu>
                                            <Submenu name="2">
                                                <template slot="title">
                                                    <Icon type="ios-keypad"></Icon>
                                                    Item 2
                                                </template>                                    
                                            </Submenu>

                                            <Submenu name="3">
                                                <template slot="title">
                                                    <Icon type="ios-analytics"></Icon>
                                                    Item 3
                                                </template>
                                                <MenuItem name="3-1">option 1</MenuItem>
                                                <MenuItem name="3-2">option 2</MenuItem>
                                            </Submenu>

                                            <Submenu name="4">
                                                <template slot="title">
                                                    <Icon type="ios-paper"></Icon>
                                                    Item 4
                                                </template>                                    
                                            </Submenu>
                                            
                                        </Menu>
                                    </Sider>
                                    <Content :style="{padding: '24px', minHeight: '280px', background: '#fff'}">
                                        
                                        <router-view></router-view>

                                    </Content>
                                </Layout>
                            </Content>
                        </Layout>
                        <Footer class="layout-footer-center">2011-2016 &copy; TalkingData</Footer>
                    </Layout>
                </div>

        
           </div>
</div>
</template>

<script>
        import { mapGetters,mapActions } from "vuex";
        export default {
            data(){
                return {
                    formInline: {
                        title: '',
                        password: ''
                    },
                    ruleInline: {
                        title: [
                            { required: true, message: '请输入用户名', trigger: 'blur' }
                        ],
                        password: [
                            { required: true, message: '请输入密码', trigger: 'blur' },
                            { type: 'string', min: 6, message: '密码位数不少于6位', trigger: 'blur' }
                        ]
                    }
                }
            },
            computed:{
                ...mapGetters(["login"])
            },
            methods:{
                 ...mapActions(["checkLogin"]),
                store(){
                    console.log(this.$store.getters.login);
                },
                handleSubmit(title) {
                    this.$refs[title].validate((valid) => {
                        if (valid) {
                            
                            this.$Message.success('登录成功!');
                            this.checkLogin(true);                                                    
                        } else {
                            this.$Message.error('请登录!');
                        }
                    })
                },
                registSubmit(){
                        location.href="https://www.baidu.com";  
                 }         
            }
        }
</script>

<style>
.layout{
    border: 1px solid #d7dde4;
    background: #f5f7f9;
    position: relative;
    border-radius: 4px;
    overflow: hidden;
}
.header{
    height:60px;padding:10px
}
.layout-logo{
    width: 150px;
    height: 30px;
    line-height: 30px;
    /* background: #5b6270; */
    border-radius: 3px;
    float: left;
    position: relative;
    top: 15px;
    left: 20px;
}
.layout-nav{
    width: 420px;
    margin: 0 auto;
    margin-right: 20px;
}
.layout-footer-center{
    text-align: center;
}
.aStyle{
    color:yellow;
    font-size: 20px;
    text-decoration: none
}
</style>
